<script setup lang="ts">
import { ref } from 'vue'

const quickActions = [
    { icon: '👨‍⚕️', text: '普通挂号', action: 'register' },
    { icon: '🏥', text: '专家号', action: 'expert' },
    { icon: '💊', text: '取药提醒', action: 'medicine' },
    { icon: '📋', text: '检查报告', action: 'report' },
    { icon: '🚑', text: '急诊导航', action: 'emergency' },
    { icon: '❓', text: '就医指南', action: 'guide' }
]

const notices = ref([
    '今日专家号余号：心内科张医生（3号），骨科李医生（5号）',
    '疫情提醒：请进入医院全程佩戴口罩，保持社交距离'
])
</script>

<template>
    <div class="home-page">
        <!-- 顶部问候 -->
        <div class="greeting">
            <h2>欢迎使用智慧医院</h2>
            <p>祝您身体健康！</p>
        </div>

        <!-- 快捷功能区 -->
        <div class="quick-actions">
            <button v-for="item in quickActions" :key="item.action" class="action-button">
                <span class="icon">{{ item.icon }}</span>
                <span class="text">{{ item.text }}</span>
            </button>
        </div>

        <!-- 通知公告 -->
        <div class="notice-board">
            <h3>医院公告</h3>
            <div class="notice-list">
                <div v-for="(notice, index) in notices" :key="index" class="notice-item">
                    {{ notice }}
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.home-page {
    padding: 20px;
}

.greeting {
    text-align: center;
    margin-bottom: 30px;
}

.greeting h2 {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-button .icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.notice-board {
    background: white;
    padding: 20px;
    border-radius: 12px;
}

.notice-board h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.notice-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
}
</style>